<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="./css/style.min.css">
    <title>订单详情</title>
    <style>

    </style>
</head>
<script type="text/javascript">
    window.onload=function () {
            document.addEventListener('touchstart',function (event) {
                if(event.touches.length>1){
                    event.preventDefault();
                }
            })
            var lastTouchEnd=0;
            document.addEventListener('touchend',function (event) {
                var now=(new Date()).getTime();
                if(now-lastTouchEnd<=300){
                    event.preventDefault();
                }
                lastTouchEnd=now;
            },false)
        }
</script>

<body>
    <div id="personal_center">
        <div class="t-container">
            <header class="cl" v-show="header.show">
                <div class="nav-bar cl">
                    <span class="goback arrow_l" @click="goback"></span>
                    <span class="page-name" v-cloak>{{shop_name}}会员店</span>
                </div>
            </header>
            <div class="t-main">
                <div class="t-whole-main t-order-details-main">
                    <div class="t-whole-goods-item">
                        <div class="t-whole-header" v-cloak>
                            <!-- <p class="header-icons">自营</p> -->
                            <p>订单详情</p>
                            <span v-if="state == -10">已取消</span>
                            <span v-if="state == 0">待确认</span>
                            <span v-if="state == 10">待付款</span>
                            <span v-if="state == 20">待发货</span>
                            <span v-if="state == 30">待收货</span>
                            <span v-if="state == 40">已完成</span>
                            <span v-if="state == 41">已完成</span>
                        </div>
                        <!--  <div class="order-mun">
                        <p>订单号:123456789</p>
                        <span>订单时间:2017-01-17 10:17:19</span>
                    </div> -->
                        <a @click="viewDetail(item.goodsId)" v-for="item in goods" v-cloak>
                            <div class="t-whole-content">
                                <div class="t-whole-pic">
                                    <img :src="item.imgUrlSmall" alt="">
                                </div>
                                <div class="t-box-flex">
                                    <strong v-cloak>{{item.goodsName}}</strong>
                                    <p>
                                        <span v-cloak>{{item.skuAttr}}</span>
                                        <!-- <span>全自动洗衣机</span>
                                        <span>尺码属性</span> -->
                                    </p>
                                </div>
                                <div class="t-box-right">
                                    <span v-cloak>￥{{item.price.toFixed(2)}}</span>
                                    <p v-cloak>x{{item.qty}}</p>
                                </div>
                            </div>
                        </a>
                        <div class="t-whole-footer" v-cloak>
                            <p>
                                <span v-cloak>共{{list.totalQty}}件商品</span>
                                <span v-cloak>合计:￥{{totalGoodsAmount}}</span>
                                <span v-if="list.totalDiscount > 0" style="display: block">优惠金额:￥{{list.totalDiscount.toFixed(2)}}</span>
                                <span v-if="list.adjustmentAmount == null"  style="display: block">订单调整金额:￥0.00</span>
                                <span v-else  style="display: block">订单调整金额:￥{{list.adjustmentAmount.toFixed(2)}}</span>
                                 <span v-if='list.predictFreight === 0' style="display: block;margin-top: 6px;">请与卖家确认发货物流公司及费用信息</span>
                                <span v-cloak v-else >(运费:￥{{list.predictFreight}})</span>

                                
                            </p>
                            <!-- 优惠券优惠后价格 -->
                            <p class="t-footer-total" v-cloak v-if="list.totalAmount > 0">总计：￥{{list.totalAmount.toFixed(2)}}</p>
                            <!-- 优惠券优惠前价格 -->
                            <!-- <p class="t-footer-total" v-cloak >总计：￥{{totalGoodsAmount}}</p> -->
                        </div>
                    </div>

                    <div class="t-whole-goods-item t-logistic-status-item" v-if="steps && steps.length>0" v-cloak>
                        <ul>
                            <li v-for="item in steps">
                                <i><em></em></i>
                                <p v-cloak>{{item.acceptAddress}}</p>
                                <p v-cloak>{{item.acceptTime}}</p>
                                <!-- <p>{{}}</p> -->
                            </li>
                            <!--    <li>
                                <i><em></em></i>
                                <p>包裹正在等待揽收</p>
                                <p>2017-01-18 02：09:47</p>
                            </li> -->
                        </ul>

                    </div>

                    <div class="t-whole-goods-item t-logistic-status-item">
                        <div class="t-input-group">
                            <label>收货人：</label>
                            <span v-cloak>{{list.receiver}}</span>
                        </div>
                        <div class="t-input-group">
                            <label>收货地址：</label>
                            <span v-cloak>{{list.provinceName}}{{list.cityName}}{{list.districtName}}{{list.townName}}{{list.villageName}}{{list.address}}</span>
                        </div>
                        <div class="t-input-group">
                            <label>物流公司：</label>
                            <span v-cloak>{{list.logisticsCompany}}</span>
                        </div>
                        <div class="t-input-group">
                            <label>运单号：</label>
                            <span v-cloak>{{list.logisticsSn}}</span>
                        </div>
                    </div>

                    <div class="t-whole-goods-item t-logistic-status-item">
                        <div class="t-input-group">
                            <label>订单编号：</label>
                            <span v-cloak>{{list.orderSn}}</span>
                        </div>
                        <!-- <div class="t-input-group">
                            <label>交易流水号：</label>
                            <span v-cloak>{{list.payCode}}</span>
                        </div> -->
                        <div class="t-input-group">
                            <label>创建时间：</label>
                            <span v-cloak>{{list.ctime}}</span>
                        </div>
                        <div class="t-input-group">
                            <label>付款时间：</label>
                            <span v-cloak>{{list.payTime}}</span>
                        </div>
                        <div class="t-input-group">
                            <label>发货时间：</label>
                            <span v-cloak>{{list.deliverTime}}</span>
                        </div>
                    </div>
                </div>
                <!-- pos二维码 -->
                <div class="pos-modul popup" v-cloak :class="{hide:pop_hide}">
                    <div class="pos-img">
                        <img v-bind:src="imgUrl" alt="">
                    </div>
                    <div class="layer" @click="closeLayer"></div>
                </div>
                <!-- 店铺公众号 -->
                <div class="pos-modul popup" v-cloak :class="{hide:pop_code_hide}">
                    <div class="pos-code-img">
                        <!-- <img v-bind:src="imgUrl" alt=""> -->
                        <a href="javascript:void(0)" @click="closeWechatLayer" class="code-close"></a>
                        <div class="pop-code-content">
                            <p class="pcc-title">关注微信公众号，把微信和店铺打通</p>
                            <div class="code-img-group">
                                <div  :class="[isWechatImg  ? wechatCodeImgBox : CodeImgBox]">
                                    <img v-bind:src="WechatCodeImg" alt="">
                                    <p>公众号ID：{{WechatCodeID}}</p>
                                </div>
                                <div class="weixin-code-img"  v-show="isWechatImg">
                                    <img src="images/code-push.png" alt="">
                                    <p>长按二维码识别并关注</p>
                                </div>
                            </div>                           
                        </div>
                        <div class="pop-code-footer">
                            <div class="pop-code-footer-c">
                                <p>关注后即可在微信公众号查询自己的订单</p>
                                <p>更时时、更方便哟~</p>
                            </div>
                            
                        </div>
                    </div>
                    <div class="layer" @click="closeWechatLayer">
                        
                    </div>
                </div>
            </div>
        </div>
        <div class="t-footer t-footer-model" v-show="isShowFooterModel" v-cloak>
            <!-- <div class="t-btn-group"> -->
            <!-- <div> -->
                <a href="javascript:void(0)" class="t-btn lineDownPay" v-if="this.state == 10 && sellerShopType == 2" @click="lineDownPay">线下支付</a>
                <a href="javascript:void(0)" class="t-btn active" v-if="this.state == 10" @click="pay">立即付款</a>
                <a href="javascript:void(0)" :class="{hide:pShow}" class="t-btn posPay" v-if="this.state == 10" @click.prevent="hidefn">pos机支付</a>              
            <!-- </div> -->
            <!-- </div> -->
        </div>
        <div class="t-footer " v-if="this.payType == 1 && this.offlinePayStatus == 10" v-cloak>
            <span class="offlineSpan">如已线下付款，请通知卖家进行确认</span>
            <a href="javascript:void(0)" class="t-btn lineDownPay" >已线下支付</a>
        </div>
        <div class="t-footer" v-show="isShowFooter" v-else v-cloak>
            <!-- <div class="t-btn-group"> -->
            <!-- <div> -->
                <a href="javascript:void(0)" class="t-btn" v-if="this.state == 10" @click="cancelBtn">取消订单</a>
                <a href="javascript:void(0)" class="t-btn payBtnGroup" v-if="this.state == 10" @click="payBtnGroup">付款</a>
                <!-- 优惠后价格 -->
                <!-- <a class="t-btn" :href="'return-goods.html?storeid='+store_id+'&status='+this.state+'&total='+this.list.totalAmount+'&id='+list.id" v-if="list.refundAllowed">退货退款</a> -->
                <a class="t-btn" :href="'return-goods.html?storeid='+store_id+'&status='+this.state+'&total='+this.list.totalAmount+'&id='+list.id" v-if="list.refundAllowed">退货退款</a>
                <a href="javascript:void(0)" class="t-btn active" v-if="this.state == 30 && list.operationAllowed " @click="confirmBtn">确认收货</a>
            <!-- </div> -->
            <!-- </div> -->
        </div>        
        <toast ref="toast"></toast>
        <confirm ref="confirm"></confirm>
    </div>
    <script src="./js/lib/vue.js"></script>
    <script src="http://static.jdhui.com/lib/vue-resource/1.2/vue-resource.js"></script>
    <script src="http://js.jdhui.com/common/WebViewJsBridge.js"></script>
    <script src="./js/min/config.min.js"></script>
    <script src="./js/min/common.min.js"></script>
    <script src="./js/min/component.min.js"></script>

    <script>
        var toast = component.popup.toast(),
            confirm = component.popup.confirm({
                name: 'confirm',
                type: 'confirm'
            });
        var app = new Vue({
            el: '#personal_center',
            data: {
                header: {
                    show: !APP.iswechat()
                },
                isWechatImg:APP.iswechat(),
                wechatCodeImgBox:'wechat-code-img-box',
                CodeImgBox:'code-img-box',
                goods: [],
                list: {},
                footerBtn: true,
                state: '',
                orderType:'',
                payType:'',
                mainOrderSn:'',
                offlinePayStatus:'',
                routes: {},
                steps: [],
                store_id: APP.getQueryString('storeid'),
                order_sn: APP.getQueryString('orderSn'),
                shop_id: APP.getQueryString('id'),
                posShow: APP.getQueryString('posShow'),
                payStatus:APP.getQueryString('payStatus'),
                totalGoodsAmount:'',
                oid: '',
                isShowFooter: false,
                isShowFooterModel:false,
                isShowFooterModel2:true,
                payhtml: '',
                shop_name: '',
                pop_hide: true,
                pop_code_hide:true,
                imgUrl:'',
                WechatCodeImg:'',
                WechatCodeID:'',
                pShow:false,
                sellerShopType:''

            },
            mounted: function() {
                APP.init(this, function() {
                    this.shop_name = APP.getCookie('shopname');
                }.bind(this), function(arg) {
                    this.shop_name = arg.body.data.shop.shop_name;
                }.bind(this));
                this.getData();
                //this.isPosShow();
            },
            components: {
                'toast': toast,
                'confirm': confirm
            },
            methods: {
                hidefn:function(){
                    
                    if(this.posShow == 1){
                        WebViewJsBridge.invoke("pos-pay", {orderId: this.order_sn}, function() {
                            window.location.href = _url;
                        });
                    }else{
                        this.pop_hide = false;
                       this.imgUrl = APIJAVA + 'qrcode?text=' + this.order_sn
                    }                   
                },
                closeLayer:function(){
                    this.pop_hide = true;
                    
                },
                closeWechatLayer:function(){
                    var host = window.location.host;
                    var _url = "http://" + host + '/order-details.html?storeid=' + this.store_id + '&orderSn=' + this.order_sn;
                    this.pop_code_hide = true;
                    window.location.href = _url;
                },
                viewDetail: function(gid) {
                    Vue.http.get(APIPHP + 'index.php?r=goods/index/check&storeid=' + this.store_id + '&id=' + gid, {
                        emulateJSON: true
                    }).then(function(_res) {
                        if (_res.body.error_code == 0) {
                            window.location.href = 'goods-detail.html?storeid=' + this.store_id + '&id=' + gid;
                        } else {
                            this.$refs.toast.show('该商品已下架');
                        }
                    }.bind(this));
                },
                goback: function() {
                    window.location.href = 'my-order.html?storeid=' + this.store_id + '&status=';
                },
                getData: function() {
                    console.log(typeof(this.goods));
                    //获取订单详情
                    Vue.http.get(APIJAVA + 'c/mobile/order/detail?shopId=' + this.store_id + '&orderSn=' + this.order_sn).then(function(_res) {
                        if (_res.body.code == 1) {
                            var _re = _res.body.obj;
                            this.list = _re;
                            this.goods = _re.goods;
                            this.state = _re.status;
                            this.orderType = _re.orderType;
                            this.routes = _re.routes;
                            this.payType = _re.payType;
                            this.mainOrderSn = _re.mainOrderSn;
                            this.offlinePayStatus = _re.offlinePayStatus;
                            this.steps = _re.routes && _re.routes.steps;
                            this.oid = _re.id;
                            this.totalGoodsAmount = _re.totalGoodsAmount.toFixed(2);
                            this.sellerShopType = _re.sellerShopType;
                            if (_re.operationAllowed) {
                                this.isShowFooter = true;
                            }
                            
                            // if(_re.payType == 1 || _re.offlinePayStatus == 10){
                            //     this.isShowFooterModel2 = true; 
                            // }
                        }

                    }.bind(this))
                    
                    // //获取店铺二维码
                    Vue.http.jsonp(PHPHOST + 'pcapi/member-shop/getmembershopinfo?shop_id=' + this.store_id
                    ).then(function(_res) {                        
                        if (_res.body.error_code == 0) {
                            var _re = _res.body.data;
                            this.WechatCodeImg = _re.signal_img;
                            this.WechatCodeID = _re.openid;
                            //店铺二维码显示
                            if (this.payStatus == 1) {
                                if(this.WechatCodeImg == null || this.WechatCodeImg == ""){
                                    this.pop_code_hide = true;
                                }else{
                                    this.pop_code_hide = false;
                                }
                               
                            }
                        }
                    }.bind(this))

                },
                cancelBtn: function() {
                    Vue.http.get(APIJAVA + 'c/mobile/order/cancel?shopId=' + this.store_id + '&orderSn=' + this.order_sn).then(function(_res) {
                        if (_res.body.code == 1) {
                            this.$refs.toast.show('取消订单成功');
                            setTimeout(function() {
                                window.location.reload();
                            }, 2000);
                        } else {
                            this.$refs.toast.show('取消订单失败');
                        }
                    }.bind(this))
                },
                confirmBtn: function(id) {
                    this.$refs.confirm.show({
                        content: '<p class="stext-center">确定收货？</p>',
                        confirm: function() {
                            Vue.http.get(APIJAVA + 'c/mobile/order/receive?shopId=' + this.store_id + '&id=' + this.oid).then(function(_res) {
                                if (_res.body.code == 1) {
                                    this.$refs.toast.show('确认收货成功');
                                    setTimeout(function() {
                                        window.location.reload();
                                    }, 2000);
                                } else {
                                    this.$refs.toast.show('确认收货失败');
                                }
                            }.bind(this))

                        }.bind(this)
                    });
                },
                pay: function(item) {
                    console.log(this.order_sn);
                    var host = window.location.host;
                    var _url = "http://" + host + '/order-details.html?storeid=' + this.store_id + '&orderSn=' + this.order_sn + "&payStatus=1";
                    
                    //pc端支付
                        Vue.http.post(APIJAVA + 'c/mobile/order/pay', {
                            shopId: this.store_id,
                            orderSn: this.order_sn,
                            returnUrl: _url
                        }, {
                            emulateJSON: true
                        }).then(function(_res) {
                            if (_res.body.code == 1) {
                                this.payhtml = _res.body.obj;
                                window.location.href = this.payhtml;
                            } else {
                                this.$refs.toast.show(_res.body.message);
                            }
                        }.bind(this), function(_res) {
                            console.log(_res);
                        })
                },
                payBtnGroup:function(){
                    if(!this.isShowFooterModel){
                        this.isShowFooterModel = true;  
                    }else{
                        this.isShowFooterModel = false; 
                    }
                },
                lineDownPay:function(){
                   
                    //线下支付检查
                    
                    Vue.http.get(APIJAVALINEPAY + 'c/mobile/order/payOfflineCheck?shopId=' + this.store_id + '&orderSn=' + this.order_sn).then(function(_res) {
                            if (_res.body.code == 1) {
                                
                                //线下支付
                                Vue.http.get(APIJAVALINEPAY + 'c/mobile/order/payOffline?shopId=' + this.store_id + '&orderSn=' + this.order_sn).then(function(_res){

                                    if(_res.body.code == 1){
                                        this.$refs.toast.show(_res.body.message);
                                        setTimeout(function() {
                                            console.log(this.WechatCodeImg);
                                            if(this.WechatCodeImg == null || this.WechatCodeImg == ""){
                                                window.location.reload();
                                            }else{
                                                this.pop_code_hide = false;                                               
                                            }
                                            //window.location.reload();
                                        }.bind(this), 2000);
                                    }else{
                                        this.$refs.toast.show(_res.body.message);
                                    }
                                }.bind(this))

                            } else {
                                this.$refs.toast.show(_res.body.message);
                            }
                    }.bind(this)) 
                }
                // isPosShow:function(){
                //     if(this.posShow == 1){
                //         this.pShow = true;
                //     } 
                // }

            }
        })
    </script>
</body>

</html>